<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<base href="<%=basePath%>">
	<head>
	<title>Customizing ComboBoxTree</title>
		<style>
		#wrap {
			position: absolute;
			width: 500px;
			height: 200px;
			left: 50%;
			top: 50%;
			margin-left: -250px;
			margin-top: -100px;
		}
		</style>
	    <link rel="stylesheet" type="text/css" href="ext3.4/resources/css/ext-all.css"/>
	    <link rel="stylesheet" type="text/css" href="ext3.4/resources/css/xtheme-gray.css"/>
	    <link rel="stylesheet" type="text/css" href="ext3.4/resources/css/mycss.css"/>
	    
		<script type="text/javascript" src="ext3.4/adapter/ext/ext-base.js"></script>
	    <script type="text/javascript" src="ext3.4/ext-all-debug.js"></script>

	
		<script type="text/javascript" src="ext3.4Demo/tree/test/ComboBoxCheckTree/ComboBoxCheckTree.js">
        </script>
		<script type="text/javascript" src="ext3.4Demo/tree/test/ComboBoxCheckTree/TreeCheckNodeUI.js">
        </script>

		<script>  
        	//Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';   
        
			Ext.onReady(function(){
				var comboBoxCheckTree = new Ext.ux.ComboBoxCheckTree({
					renderTo : 'comboBoxCheckTree',
					width : 300,
					height : 150,
					tree : {
						xtype:'treepanel',
						height:100,
						checkModel: 'cascade',   //cascade selection
						onlyLeafCheckable: false,//all nodes with checkboxes
						animate: true,
						rootVisible: true,
						autoScroll:true,
						loader: new Ext.tree.TreeLoader({dataUrl:'ext3.4Demo/tree/test/ComboBoxCheckTree/treedata.js',   
	                    baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } }),
			       	 	root : new Ext.tree.AsyncTreeNode({id:'0',text:'root'})
			    	},
			    	
			    	// define which node's value will be submited
			    	//all
			    	//folder
					//leaf
					selectValueModel:'leaf'
					
				});
				
				var tf = new Ext.form.TextField({
				 renderTo:'textct'
				,id:'tf'
				,width:300
				,selectOnFocus:false
				,listeners:{
					focus:function() {this.setValue(comboBoxCheckTree.getValue());}
				}
			});
			});
				
    </script>
	</head>
	<body>
	<div id="wrap">
		<div id="comboBoxCheckTree"></div>
		<br><br>
		<div id="textct"></div>
	</div>
	</body>
</html>
